/*
 * @Description: 选择车票日期组件
 * @Author: shuaishuai.wang
 * @Date: 2019-08-21 09:39:13
 * @Last Modified by: shuaishuai.wang
 * @Last Modified time: 2019-08-23 16:52:33
 */
<template>
  <div class="choose_time_main">
    <list-state
      :stateOption="stateOption"
      @toRequest="toRequest"
    ></list-state>
    <div class="time fontsize32">{{time}}</div>
    <div class="choose_time_area">
      <div class="choose_time_scroll flex-h">
        <time-block
          v-for="(time, index) in timeList"
          :key="index"
          :time="time"
          @click.native="getThisTimeData(index)"
          :selected="chooseIndex === index"
        ></time-block>
      </div>
    </div>
    <choose-ticket ref="chooseTicket"></choose-ticket>
  </div>

</template>

<script>
export default {
  /* props: {
    timeList: {
      type: Array,
      default: null
    }
  }, */
  data () {
    return {
      stateOption: { // 遮罩层配置
        index: 0,
        mask: false
      },
      chooseIndex: 0, // 选中日期下标
      time: '2019年08月', // 当前所属月份
      timeList: [ // 日期数据
        {
          big: '1',
          small: '周一'
        }, {
          big: '1',
          small: '周一'
        }, {
          big: '1',
          small: '周一'
        }, {
          big: '1',
          small: '周一'
        }, {
          big: '1',
          small: '周一'
        }, {
          big: '1',
          small: '周一'
        }, {
          big: '1',
          small: '周一'
        }, {
          big: '1',
          small: '周一'
        }, {
          big: '1',
          small: '周一'
        }, {
          big: '1',
          small: '周一'
        }, {
          big: '1',
          small: '周一'
        }, {
          big: '1',
          small: '周一'
        }, {
          big: '1',
          small: '周一'
        }, {
          big: '1',
          small: '周一'
        }, {
          big: '1',
          small: '周一'
        }
      ]
    }
  },
  methods: {
    toRequest () { // 重新请求方法，暂时模拟
      this.stateOption.index = 0
      setTimeout(() => {
        this.stateOption.mask = false
      }, 1000)
    },
    getThisTimeData (index) { // 获取当天车票数据
      if (this.chooseIndex !== index) {
        this.stateOption.mask = true
        setTimeout(() => {
          this.$refs.chooseTicket.ticketIndex = 0
          this.chooseIndex = index
          this.stateOption.mask = false
        }, 1000)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.choose_time_main {
  position: relative;
  .choose_time_area {
    width: 686px;
    position: relative;
    margin: auto;
    overflow-x: auto;
    padding: 10px 0;
    padding-left: 10px;
    .choose_time_scroll {
      width: fit-content;
      flex-wrap: nowrap;
    }
  }
  .time {
    height: 100px;
    line-height: 100px;
    margin-left: 36px;
    color: #333;
  }
}
</style>
